        
        <style type="text/css">
            
            
/*            .sidebar {
                display: block;
                float: left;
                width: 250px;
                background: #333;
            }
            .content {
                display: block;
                overflow: hidden;
                width: auto;
            }

            .sidebar-nav {
                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
                background-image: -webkit-linear-gradient(left, color-stop(#333333 10px), color-stop(#222222 10px));
                background-image: linear-gradient(to right, #333333 10px, #222222 10px);
                background-repeat: repeat-x;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=1);
            }
            .sidebar-nav ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            .sidebar-nav ul li,
            .sidebar-nav ul a {
                display: block;
            }
            .sidebar-nav ul a {
                padding: 10px 20px;
                color: #aaa;
                border-top: 1px solid rgba(0, 0, 0, 0.3);
                box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.05) inset;
                text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
            }
            .sidebar-nav ul a:hover,
            .sidebar-nav ul a:focus,
            .sidebar-nav ul a:active {
                color: #fff;
                text-decoration: none;
            }
            .sidebar-nav ul ul a {
                padding: 10px 30px;
                background-color: rgba(255, 255, 255, 0.1);
            }
            .sidebar-nav ul ul a:hover,
            .sidebar-nav ul ul a:focus,
            .sidebar-nav ul ul a:active {
                background-color: rgba(255, 255, 255, 0.2);
            }
            .sidebar-nav-item {
                padding-left: 5px;
            }
            .sidebar-nav-item-icon {
                padding-right: 5px;
            }*/
            
        </style>
        
        
        
        
        
        
        <div class="row">
            <div class="col-12">
                
                <div class="row">
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    <!-- Sidebar -->
                    <div id="sidebar" class="col-3">
                        <ul id="sidebar-nav" class="sidebar-nav">
                            <li class="active">
                                <a href="#"><i class="fa fa-dashboard fa-lg"></i> Menu 0 <span class="glyphicon arrow"></span></a>
                                <ul>
                                    <li><a href="#">item 0.1</a></li>
                                    <li><a href="#">item 0.2</a></li>
                                    <li><a href="http://onokumus.com">onokumus</a></li>
                                    <li><a href="#">item 0.4</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Menu 1 <span class="glyphicon arrow"></span></a>
                                <ul>
                                    <li><a href="#">item 1.1</a></li>
                                    <li><a href="#">item 1.2</a></li>
                                    <li>
                                        <a href="#">Menu 1.3 <span class="glyphicon arrow"></span></a>
                                        <ul>
                                            <li><a href="#">item 1.3.1</a></li>
                                            <li><a href="#">item 1.3.2</a></li>
                                            <li><a href="#">item 1.3.3</a></li>
                                            <li><a href="#">item 1.3.4</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">item 1.4</a></li>
                                    <li>
                                        <a href="#">Menu 1.5 <span class="glyphicon arrow"></span></a>
                                        <ul>
                                            <li><a href="#">item 1.5.1</a></li>
                                            <li><a href="#">item 1.5.2</a></li>
                                            <li><a href="#">item 1.5.3</a></li>
                                            <li><a href="#">item 1.5.4</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Menu 2</a>
                                <ul>
                                    <li><a href="#">item 2.1</a></li>
                                    <li><a href="#">item 2.2</a></li>
                                    <li><a href="#">item 2.3</a></li>
                                    <li><a href="#">item 2.4</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    
                    <div id="main-container" class="ajax-container col-9">
                        <section class="row">
                            <div class="col-lg-12">
                                <div>
                                    <h1><i class="fa fa-dashboard"></i> Dashboard</h1>
                                </div>
                                <div>
                                    <?= $this->breadcrumb->output(); ?>
                                </div>
                            </div>
                        </section>

                        <section class="row">
                            <div class="col-12">
                                <div id="panel" class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="pull-right">
                                            <span class="minimax"></span>
                                            <button type="button" class="close" aria-hidden="true">&times;</button>
                                        </div>
                                        <h2 class="panel-title bold"><i class="fa fa-list-alt"></i> Preview Panel</h2>
                                    </div>
                                    <div class="panel-body">
                                        <div class="guideline guideline-sticky bg-info">
                                            <i class="fa fa-info-circle fa-lg"></i> Panel Guideline Goes Here.
                                        </div>
                                        Content Goes Here ...
                                    </div>
                                    <div class="panel-footer">
                                        <div class="align-center">
                                            Footer
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                
                <!-- page-script -->
                <script src="<?= base_url() ?>js/scripts/dashboard.js"></script>
                
            </div>
        </div>